<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>药品信息管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8fafc;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .page-title {
            color: #1f2937;
            margin: 0;
            font-size: 1.8rem;
            font-weight: 600;
        }

        .action-buttons {
            display: flex;
            gap: 0.5rem;
        }

        .btn-primary {
            background-color: #3b82f6;
            border-color: #3b82f6;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #2563eb;
            border-color: #2563eb;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .btn-primary i {
            margin-right: 0.5rem;
        }

        .card {
            border: none;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .card:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transform: translateY(-5px);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        thead {
            background-color: #f3f4f6;
        }

        th, td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }

        th {
            color: #1f2937;
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        tbody tr:hover {
            background-color: #f9fafb;
        }

        .action-links {
            display: flex;
            gap: 0.75rem;
        }

        .action-links a {
            color: #6b7280;
            text-decoration: none;
            transition: all 0.2s ease;
            font-size: 0.9rem;
        }

        .action-links a:hover {
            color: #3b82f6;
        }

        .edit-link {
            color: #10b981;
        }

        .edit-link:hover {
            color: #059669;
        }

        .delete-link {
            color: #ef4444;
        }

        .delete-link:hover {
            color: #dc2626;
        }
    </style>
</head>
<body>

<div class="container mt-5">
    <div class="header-container">
        <h1 class="page-title">药品信息管理</h1>
        <div class="action-buttons">
            <a th:href="@{/admin/drug/add}" class="btn btn-primary">
                <i class="fa fa-plus"></i> 添加新药品
            </a>
        </div>
    </div>

    <!-- 药品表格 -->
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>药品ID</th>
                <th>名称</th>
                <th>规格</th>
                <th>生产厂家</th>
                <th>库存数量</th>
                <th>单价</th>
                <th>入库时间</th>
                <th>有效期至</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        <tr th:if="${#lists.isEmpty(drugs)}">
            <td colspan="8" class="text-center">暂无药品信息</td>
        </tr>
        <tr th:each="drug : ${drugs}">
            <td th:text="${drug.id}">药品ID</td>
            <td th:text="${drug.name}">药品名称</td>
            <td th:text="${drug.manufacturer} ?: '--'">生产厂家</td>
            <td th:text="${drug.specification} ?: '--'">规格</td>
            <td th:text="${drug.stock} ?: '--'">库存数量</td>
            <td th:text="${drug.price} ?: '--'">价格</td>
            <td th:text="${drug.stockInDate} != null ? ${#dates.format(drug.stockInDate, 'yyyy-MM-dd HH:mm')} : '--'">入库时间</td>
            <td th:text="${drug.validUntil} != null ? ${#dates.format(drug.validUntil, 'yyyy-MM-dd')} : '--'">有效期至</td>
            <td class="action-links">
                <a th:href="@{/admin/drug/edit/{id}(id=${drug.id})}" class="edit-link">编辑</a> |
                <a th:href="@{/admin/drug/delete/{id}(id=${drug.id})}" onclick="return confirm('确定要删除此药品吗？')" class="delete-link">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
